<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
            <title>登录</title>
            
            
            <link href="login.css" rel="stylesheet">
    </head>
    <body>
        <!--面板-->
        <div id="panel">
            <!--面板头部-->
            <div class="panel-top">
                <h3>登录</h3>
                <div style="width:64px; height:64px; border-radius:50%; overflow:hidden;">
                    <img id="icon" src="none.png" onerror="this.src='none.png'" alt="头像" />
                </div>
                
            </div>
            <!--m面板中部-->
            <div class="panel-middle">
                <div class="int">
                    <label>
                        <img src="icon_password.png">
                            </label>
                    <input id="userName" type="text" onkeyup="usrNameSet(this)" placeholder="您的邮箱/用户名">
                        </div>
                <div class="int">
                    <label>
                        <img src="icon_people.png">
                            </label>
                    <input id="passw"  type="password" onkeyup="passwordSet(this)" placeholder="输入密码">
                        </div>
                <div class="seting">
                    <label class="auto">
                        <input  type="checkbox"> 记住密码
                            </label>
                    <label class="forget">忘记密码?</label>
                </div>
                <div class="login">
                    <button type="submit">登录</button>
                </div>
            </div>
            <div class="other">
                <span>还没账号?</span>
                <span>
                    <a href="#">马上注册</a>
                </span>
            </div>
            <!--面板底部-->
            <div class="panel-footer">
                
            </div>
            
            
        </div>
        
        <script type="text/javascript">
            
            let user = document.getElementsByTagName("input")[0].value;
            var paws = document.getElementById("passw");
            
            //只能输入数字、字母、小数点、汉字、@
            function usrNameSet(num){
                var str=num.value;
                var str = document.getElementById("userName").value;
                var value=str.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g,'');
                document.getElementById("userName").value=value;
                
                document.getElementById('icon').src="http://ifaxian.cc/wp-content/uploads/" + value + "_avatar-64x64.jpg";
            }
        
        
        //密码设置   不能为空格
        
        function passwordSet(num){
            
            var str=document.getElementById("passw").value;
            var value=str.replace(/^ +| +$/g,'');
            document.getElementById("passw").value=value;
            
            var str=num.value;
            var value=str.replace(/^ +| +$/g,'');
            num.value=value;
            
        }
        
        let butn = document.getElementsByClassName("login")[0];
        butn.onclick = function(){
            
            
            
            
            
            window.open(href="http://52it.me/wp-admin");
            
            
        }
        
        
        
        
            </script>
        
    </body>
</html>
